<!--登录页面-->
<template>
  <div class="login">
    <el-row>
      <el-col :span="8"></el-col>
      <el-col :span="8">
        <el-form class="form" :model="model" :rules="rules" ref="loginForm">
          <!--      <h1 class="title">仙途码源界</h1>-->
          <h1 class="title">仙途码源界</h1>
          <el-form-item prop="userName">
            <el-input
                class="text"
                v-model="model.userName"
                prefix-icon="User"
                clearable
                :placeholder="admin"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
                class="text"
                v-model="model.password"
                prefix-icon="Lock"
                show-password
                clearable
                :placeholder="admin"
            />
          </el-form-item>

          <el-form-item prop="captcha">
            <div class="captcha">
              <el-input
                  class="text"
                  v-model="model.captcha"
                  prefix-icon="Picture"
                  placeholder="请输入验证码"
              ></el-input>
              <img :src="captchaSrc" @click="refreshCaptcha"/>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button
                :loading="loading"
                type="primary"
                class="btn"
                size="large"
                @click="submit"
            >登录
            </el-button>
          </el-form-item>
        </el-form>
        <div style="margin-top: 100px">
          <Footer/>
        </div>
      </el-col>
      <el-col :span="8">
        <!--        <div style="display: flex;justify-content: center;text-align: center;margin-top: 200px">-->
        <div class="qr-container">
          <img src="@/assets/qr/wxqr.jpg"/>
          <p class="qr-text">欢迎关注公众号--暮雨极客</p>
        </div>
      </el-col>
    </el-row>
  </div>


</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  reactive,
  toRefs,
  ref,
  onMounted,
} from 'vue'
import {Login, GetValidateCode} from '@/api/member/login.js'
import {useRouter, useRoute} from 'vue-router'
import {useApp} from '@/pinia/modules/app'
import Footer from '@/components/Footer/Footer.vue'

export default defineComponent({
  components: {Footer},
  name: 'loginView',
  setup() {
    const {proxy: ctx} = getCurrentInstance() // 可以把ctx当成vue2中的this
    const router = useRouter()
    const route = useRoute()

    // onMounted钩子函数
    onMounted(() => {
      state.refreshCaptcha()
    })

    const state = reactive({
      model: {
        userName: 'admin',
        password: 'admin',
        captcha: '', // 用户输入的验证码
        codeKey: '', // 后端返回的验证码key
      },
      loading: false,
      captchaSrc: '',
      refreshCaptcha: async () => {
        const {data} = await GetValidateCode()
        state.model.codeKey = data.codeKey
        state.captchaSrc = data.codeValue
      },
      loginForm: ref(null),
      submit: () => {
        if (state.loading) {
          return
        }
        state.loginForm.validate(async valid => {
          if (valid) {
            state.loading = true
            const {code, data, msg} = await Login(state.model)
            if (+code === 200) {
              ctx.$message.success({
                message: '登录成功',
                duration: 1000,
              })
              const targetPath = decodeURIComponent(route.query.redirect)
              if (targetPath.startsWith('http')) {
                // 如果是一个url地址
                window.location.href = targetPath
              } else if (targetPath.startsWith('/')) {
                // 如果是内部路由地址
                router.push(targetPath)
              } else {
                router.push('/') // 请求成功以后，进入到首页
              }
              useApp().initToken(data)
            } else {
              console.log('----【code】' + code)
              console.log('----【data】' + data)
              console.log('----【msg】' + msg)
              ctx.$message.error(msg)
            }
            state.loading = false
          }
        })
      },
    })

    return {
      ...toRefs(state),
    }
  },
})
</script>

<style lang="scss" scoped>
.login {
  transition: transform 1s;
  transform: scale(1);
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #2d3a4b;

  .qr-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* 图片和文字之间的间距 */
    margin-top: 200px;
  }

  .qr-text {
    font-size: 16px;
    color: white; /* 文字颜色 */
    margin: 0; /* 移除默认段落边距 */
  }

  .form {
    width: 520px;
    max-width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
    margin: 160px auto 0;

    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
      background: rgba(0, 0, 0, 0.1);
    }

    :deep(.el-input-group--append > .el-input__wrapper) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    :deep(.el-input-group--prepend > .el-input__wrapper) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    .title {
      color: #fff;
      text-align: center;
      font-size: 24px;
      margin: 0 0 24px;
    }

    .text {
      font-size: 16px;

      :deep(.el-input__inner) {
        color: #fff;
        height: 48px;
        line-height: 48px;

        &::placeholder {
          color: rgba(255, 255, 255, 0.2);
        }
      }
    }

    .btn {
      width: 100%;
    }
  }
}

.captcha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.captcha img {
  cursor: pointer;
  margin-left: 20px;
}

.change-lang {
  position: fixed;
  right: 20px;
  top: 20px;

  :deep(.change-lang) {
    height: 24px;

    &:hover {
      background: none;
    }

    .icon {
      color: #fff;
    }
  }
}
</style>